<template>
    <div class="box-card header_wrapper">
        <div class="header_container">
            <el-form>
                <el-form-item v-for="tagList in onShowButtons" :label="tagList.label + ' :'" :id="tagList.name" @click="clickHander">
                    <span  class="select-item" v-for="tag in tagList.choises" :id="tag.id" :data-filterCode="tagList.name" :data-active="0">{{tag.name}}</span>
                </el-form-item>
                <el-form-item style="position:relative">
                    <div class="showButton" @click="showButtonsHandle">{{showButtonText}}</div>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="box-card header_wrapper"  style="margin-top:30px">
        <div class="header_container">
            <!-- <span :class="{active:show==1}" class="filter" @click="show=1,part='integrated',getPageInfo()">综合</span> -->
            <span :class="{active:show==1}" class="filter" @click="changePath('integrated'),show=1">综合</span>
            <span :class="{active:show==2}" class="filter" @click="changePath('sellCount'),show=2">评价</span>
            <span :class="{active:show==3}" class="filter" @click="changePath('viewCount'),show=3">浏览量</span>
            <span :class="{active:show==4}" class="filter" @click="changePath('priceDesc'),show=4">价格</span>
            <span :class="{active:show==5}" class="filter" @click="changePath('onsellTimeDesc'),show=5">发布时间</span>
        </div>
    </div>

    <div class="box-card header_wrapper videoContent" v-loading="loading"></div>
    
    <div class="box-card header_wrapper video_wrapper"  style="margin-top:30px">
        
        <div class="videoContent" v-if="!loading">
            <div  class="card_item" v-for="courses in onShowCourses" :key="courses.id">
                <div class="cover_waper">
                    <div class="cover">
                        <a href="javascript:;">
                            <a :href="`https://www.dance365.com/detail/${courses.subject}?momentId=${courses.momentId}&source=${courses.vipTag.groupType}`" target="_blank"><img class="cover_img" :src="courses.cover[0]"/></a>
                            
                            <img src="../../../assets/images/bf.png" class="play_icon">
                        </a>
                    </div>
                    <div class="moment_detail">
                        <span class="moment-row-1">{{ courses.title }}</span>
                    </div>
                    <div class="moment_browse">
                        <div style="display:flex;justify-content: space-between;">
                            <span style="font-size:15px;color:red">￥{{Number(courses.commodityBackup?.price).toFixed(2)}}</span>
                            <span>{{numTrans(courses.statisticsBackup.viewCount)}}人浏览</span>
                        </div>
                        <div class="comments">
                            <div class="comments-list">
                                <i class="iconfont icon-dianzan" style="font-size:15px;"></i>
                                <span style="margin-right: 17px">&nbsp;{{ courses.statisticsBackup.praiseCount }}</span>
                                <i class="iconfont icon-pinglun" style="font-size:15px"></i>
                                <span style="margin-right: 15px">&nbsp;{{ courses.statisticsBackup.commentCount }}</span>
                                <i class="iconfont icon-kongxinwujiaoxing" style="font-size:15px"></i>
                                <span style="margin-right: 5px">&nbsp;{{ courses.statisticsBackup.favoriteCount }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="moment-user">
                    <div class="moment-user-span">
                        <img :src="courses.creatorBackup.avatar" alt="">
                        <span>{{ courses.creatorBackup.name }}</span>
                    </div>
                    <span class="moment-user-data">08-16</span>
                </div>
            </div>
        </div>
    </div>
    <div class="box-card header_wrapper videoContent" v-if="pageNum>0" v-loading="moreLoading"></div>
    <div  style="display:flex;align-items: center;justify-content: center;" v-if="!moreLoading">
        
        <el-button  @click="showMore" v-if="!loading">加载更多</el-button>
    </div>
</template>

<script setup>

import { ref,onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { filterInfo, getResourse } from '@/api/discovery'
import { ElMessage } from 'element-plus';
import pinia from "@/store/index";
import {discStore} from "@/store/modules/disc.js";
const disc = discStore(pinia)
const router = useRouter()
const pathPart = ref('integrated')
const loading = ref(false)
const moreLoading = ref(false)
const updateHandle = ref(false)
const show = ref(1)
// const checked = ref(false)
const total = ref(0)
const pageSize = ref(20)
const pageNum = ref(0)
let tagGroups = []
let initTagGroups = []
const initCourses = ref([])
const showButtonText = ref('展开全部')
const onShowCourses = ref([])
const onShowButtons = ref([])
const hiden = ref(true)
const initFilterObj = (a) => ({
    filterCode:a,
    filterValue:[]
})

const avocationObj = ref(initFilterObj("avocation"))
const priceRangeObj = ref(initFilterObj("priceRange"))
const courseTypeObj = ref(initFilterObj('courseType'))
const learningGoalsObj = ref(initFilterObj('learningGoals'))
const difDegreeObj = ref(initFilterObj('difficultDegree'))
const params = ref([
    avocationObj.value,
    priceRangeObj.value,
    courseTypeObj.value,
    learningGoalsObj.value,
    difDegreeObj.value
])

const showMore = ()=>{
    pageNum.value += 1
    updateHandle.value = true
    getPageInfo()
}



const numTrans = (value)=>{
        let param = {};
        let i;
        if(value < 10000) {
            return value
        }else{
            i = Math.floor(Math.log(value) / Math.log(10000))
            param.value = ((value / Math.pow(10000,i))).toFixed(1) + 'W'
            return param.value;
        }
    }
const showButtonsHandle = () => {
    if (hiden.value) {
        onShowButtons.value = tagGroups
        showButtonText.value = '收起'
        hiden.value = false
    } else {
        onShowButtons.value = initTagGroups
        showButtonText.value = '展开全部'
        hiden.value = true
    }
}
//
const changePath = (part) => {
    pageNum.value = 0
    loading.value = true
    updateHandle.value = true
    pathPart.value = part
    onShowCourses.value = []
    getPageInfo()
}

const getPageInfo=async()=>{
    if(updateHandle.value){
        try {
            
            let res = await getResourse(pageSize.value, pageNum.value, router.currentRoute.value.path.split('/')[2], pathPart.value, params.value)
            total.value = res.numberOfElements
            onShowCourses.value = onShowCourses.value.concat(res.content)
            // localStorage.setItem('total',res.totalElements)
            disc.upTotal(res.totalElements);
        } catch (error) {
            ElMessage.error(error)
        }
    }else{
        try {
            let res = await getResourse(pageSize.value, pageNum.value ,router.currentRoute.value.path.split('/')[2] ,pathPart.value,params.value)
            let result = await filterInfo(router.currentRoute.value.path.split('/')[2])
            disc.upTotal(res.totalElements);
            tagGroups = result
            onShowCourses.value = res.content
            // initTagGroups.push(tagGroups[0])
            // initTagGroups.push(tagGroups[1])
            initTagGroups = tagGroups.slice(0,2)
            onShowButtons.value = initTagGroups
        } catch (error) {
            ElMessage.error(error)
        }
    }
    setTimeout(()=>{
        loading.value = false
        moreLoading.value = false
    },1000)
    
}
watch(params.value,()=>{
    loading.value = true
    updateHandle.value = true
    onShowCourses.value = []
    getPageInfo()
},{deep:true})

onMounted(()=>{
    loading.value = true
    updateHandle.value = false
    getPageInfo()
    // console.log(useRouter().currentRoute.value.path)
    // console.log(domlist.value.target);
})
// 兴趣爱好请求数组参数

const pushOrSplice = ( target,id,arr ) => {
    if (target.dataset.active==='1'){
        arr.value.filterValue = arr.value.filterValue.filter(item=>item !== id)
        target.dataset.active = '0'
    }else if(arr.value.filterValue.length<3){
        arr.value.filterValue.push(id)
        target.dataset.active = '1'
    }else{
        ElMessage.info('同一项只能添加3个')
    }
}
const clickHander = (e) => {
    // console.log(e)
    const target = e.target
    const id = target.id
    if (target.nodeName === 'SPAN') {
        if (target.dataset.filtercode === "avocation") {
            pushOrSplice(target,id,avocationObj)
        }else if (target.dataset.filtercode === "priceRange") {
            pushOrSplice(target,id,priceRangeObj)
        }else if (target.dataset.filtercode === "courseType") {
            pushOrSplice(target,id,courseTypeObj)
        }else if (target.dataset.filtercode === "learningGoals") {
            pushOrSplice(target,id,learningGoalsObj)
        }else if (target.dataset.filtercode === "difficultDegree") {
            pushOrSplice(target,id,difDegreeObj)
        }
        // console.log(params.value)
    }
}

</script>


<style scoped lang="less">
@import url("//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css");
.header_wrapper {
    background-color: rgb(249, 249, 249);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .header_container {
        padding: 30px;
        background-color: rgb(255, 255, 255);
        width: 1200px;
        display: flex;
        align-items: center;

    }
}

.select-item {
    display: inline-block;
    color: #7d8090;
    margin-top: 5px;
    margin-left: 30px;
    cursor:pointer
}

.filter {
    padding-left: 30px;
    font-size: 15px;
}
.filter:hover {
    text-decoration: underline;
    cursor:pointer;
    text-decoration: none;
    color:rgb(241, 54, 85);
}
.filter.active {
    color:rgb(241, 54, 85);
}

.video_wrapper {
    width: 100%;
    display: flex;
    justify-content: center;

    .videoContent {
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
    }
}


.showButton {
    color: rgb(241, 54, 85);
    height: 20px;
    width: 100px;
    position: absolute;
    left: 50%;
    translate: -50%;
    margin-top: 30px;
    cursor: pointer;
}

.showButton:hover {
    text-decoration: underline;
    color: rgb(241, 175, 186)
}


//card
.card_item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 224px;
    height: auto;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    margin-right:16px;
    justify-content: space-evenly;

    .cover_waper {
        height: 248px;
        position: relative;

        .cover {
            .cover_img {
                opacity: 1;
                width: 224px;
                height: 125px;
                border-radius: 4px 4px 0 0;

                :hover {
                    opacity: 0.4;
                }
            }

            .play_icon {
                position: absolute;
                bottom: 126px;
                left: 4px;
                display: inline-block;
                width: 30px;
                height: 30px;
            }
        }

        .moment_detail {
            padding: 10px;
            height: 40px;

            .moment-row-2 {
                border: 3px #000 solid;
                font-size: 3px;
                border-radius: 4px 4px;
                font-weight: 600;
                margin-right: 8px;
                margin-bottom: 5px;
            }

            .moment-row-1 {
                font-size: 13px;
                margin-right: 5px;
            }
        }

        .moment_browse {
            margin: 10px 10px 0;

            .browse {
                font-size: 13px;
                color: #99a9bf;
            }

            .comments {
                .comments-list {
                    margin: 7px 0px;
                    color: #99a9bf;
                }
            }
        }
    }

    .moment-user {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding-left: 16px;
        position: relative;
        overflow: hidden;
        height: 50px;
        font-size: 12px;
        border-top: 1px #d3dce6 solid;
    }


    img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
    }

    .moment-user-span {
        width: 80px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        img {
            vertical-align: middle;
            margin-right: 5px;
        }
    }

    .moment-user-data {
        padding: 0 10px;
        color: #99a9bf;
    }
}
.select-item{
    font-size: 14px;
    margin-right:24px;
    padding:0px 14px;
    border-radius: 4px;
}
.select-item[data-active="1"]{
    background-color: #f93684 !important;
    color:#fff
}
</style>

